import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { 
  Button, 
  Text, 
  Title3,
  makeStyles,
  tokens,
  Tab,
  TabList,
} from '@fluentui/react-components'
import type { SelectTabData, SelectTabEvent } from '@fluentui/react-components'
import { 
  Home24Regular,
  Bot24Regular, 
  Settings24Regular,
  Document24Regular,
  SignOut24Regular
} from '@fluentui/react-icons'
import { useAuthStore } from '../store/authStore'

const useStyles = makeStyles({
  container: {
    display: 'flex',
    flexDirection: 'column',
    height: '100vh',
    width: '100vw',
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '16px 32px',
    minHeight: '64px',
    borderBottom: `1px solid ${tokens.colorNeutralStroke2}`,
    backgroundColor: tokens.colorNeutralBackground1,
    boxShadow: tokens.shadow2,
  },
  headerLeft: {
    display: 'flex',
    alignItems: 'center',
    gap: '24px',
  },
  headerRight: {
    display: 'flex',
    alignItems: 'center',
    gap: '20px',
  },
  main: {
    display: 'flex',
    flex: 1,
    overflow: 'hidden',
    height: 'calc(100vh - 64px)',
  },
  sidebar: {
    width: '280px',
    minWidth: '280px',
    borderRight: `1px solid ${tokens.colorNeutralStroke2}`,
    backgroundColor: tokens.colorNeutralBackground2,
    padding: '24px 0',
    display: 'flex',
    flexDirection: 'column',
  },
  content: {
    flex: 1,
    padding: '32px',
    overflow: 'auto',
    backgroundColor: tokens.colorNeutralBackground1,
    minWidth: '800px', // 确保内容区有最小宽度
  },
  tabList: {
    flexDirection: 'column',
    alignItems: 'stretch',
    padding: '0 16px',
  },
  logo: {
    fontSize: '24px',
    fontWeight: '600',
    color: tokens.colorBrandForeground1,
  },
  userInfo: {
    fontSize: '14px',
    color: tokens.colorNeutralForeground2,
  },
})

const Layout = () => {
  const classes = useStyles()
  const navigate = useNavigate()
  const location = useLocation()
  const { currentUser, logout } = useAuthStore()

  const handleTabSelect = (_: SelectTabEvent, data: SelectTabData) => {
    navigate(`/${data.value}`)
  }

  const handleLogout = () => {
    logout()
    navigate('/login')
  }

  const getCurrentTab = () => {
    const path = location.pathname.slice(1)
    return path || 'dashboard'
  }

  return (
    <div className={classes.container}>
      {/* 顶部导航栏 */}
      <header className={classes.header}>
        <div className={classes.headerLeft}>
          <Title3 className={classes.logo}>SPAM3-GO</Title3>
        </div>
        <div className={classes.headerRight}>
          <Text className={classes.userInfo}>当前用户: {currentUser || 'admin'}</Text>
          <Button 
            icon={<SignOut24Regular />} 
            onClick={handleLogout}
            appearance="subtle"
            size="large"
          >
            退出
          </Button>
        </div>
      </header>

      {/* 主内容区 */}
      <div className={classes.main}>
        {/* 左侧菜单栏 */}
        <nav className={classes.sidebar}>
          <TabList 
            className={classes.tabList}
            selectedValue={getCurrentTab()}
            onTabSelect={handleTabSelect}
            vertical
            size="large"
          >
            <Tab value="dashboard" icon={<Home24Regular />}>
              仪表盘
            </Tab>
            <Tab value="crawler" icon={<Bot24Regular />}>
              爬虫任务
            </Tab>
            <Tab value="config" icon={<Settings24Regular />}>
              系统配置
            </Tab>
            <Tab value="logs" icon={<Document24Regular />}>
              日志管理
            </Tab>
          </TabList>
        </nav>

        {/* 右侧主内容区 */}
        <main className={classes.content}>
          <Outlet />
        </main>
      </div>
    </div>
  )
}

export default Layout
